<template>
	<div class="total">
		<img class="img" src="@/assets/images/member/centerbg.png" alt="" />

		<div class="total-content">
			<div class="top-tips">
				<div class="top-tips-l">
					<i class="iconfont icon-webicon209"></i>
					温馨提示：已下单，但不显示订单，<span @click="$router.push('/member-order-retrieve-order')" class="span">点我找回</span>
				</div>
				<div class="top-tips-r">
					<i class="iconfont icon-xiayiye"></i>
				</div>
			</div>
			<div class="total-list">
				<div class="total-item" v-for="(item, index) in totalList" :key="index">
					<div class="total-item-bg">
						<div class="order-all">
							{{ item.name }}
							<!-- <svg-icon class="icon" @click="message(item.message)" iconName="whattow"></svg-icon> -->
						</div>
						<div class="order-money">
							<span class="icon">¥</span>
							<span class="num">{{ item.num }}</span>
						</div>
						<div class="order-count">
							<i class="iconfont icon-dingdan"></i>
							{{ item.orderCount }}笔
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			totalList: [
				{
					name: '全部补贴',
					num: '0',
					orderCount: '0',
					message: '全部补贴=入账中补贴+已入账补贴'
				},
				{
					name: '入账中',
					num: '0',
					orderCount: '0',
					message: '入账中：订单已付款状态的补贴'
				},
				{
					name: '已入账',
					num: '0',
					orderCount: '0',
					message: '已入账：订单已收货的补贴'
				}
			]
		};
	},
	props: {
		total: {
			type: [Object],
			default: () => {
				return {
					order: 0,
					money: 0
				};
			}
		}
	},
	mounted() {
		this.$service.member.order.sum().then(res => {
			this.totalList[0].num = res.all.orderCommission;
			this.totalList[0].orderCount = res.all.orderNum;
			this.totalList[1].num = res.not.orderCommission;
			this.totalList[1].orderCount = res.not.orderNum;
			this.totalList[2].num = res.already.orderCommission;
			this.totalList[2].orderCount = res.already.orderNum;
			// eslint-disable-next-line
			this.totalList = this.totalList;
		});
	},
	methods: {
		message(msg) {
			this.$dialog
				.alert({
					title: '',
					message: msg,
					confirmButtonColor: '#f1482c',
					lockScroll: true
				})
				.then(() => {
					// on close
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.total {
	width: 100%;
	// background: #f1482c;
	padding-bottom: 42px;
	position: relative;
	.img {
		width: 100%;
		height: 199px;
		position: absolute;
	}
	.total-content {
		position: relative;
		z-index: 1;
		top: 12px;
		.top-tips {
			@include flexBox(space-between, center);
			font-size: 24px;
			color: #ffffff;
			width: 710px;
			height: 52px;
			line-height: 52px;
			background: rgba(245, 92, 16, 1);
			border-radius: 16px;
			margin: 0 auto 14px auto;
			padding-right: 20px;
			padding-left: 20px;
			.top-tips-l {
				@include flexBox(center, center);
				i {
					font-size: 35px;
					margin-right: 5px;
				}
				.span {
					display: inline-block;
					border-bottom: solid 1px #ffffff;
					height: 38px;
					line-height: 36px;
				}
			}
			.top-tips-r {
				@include flexBox(center, center);
				i {
					font-size: 25px;
				}
			}
		}
	}
	.total-list {
		display: flex;
		align-items: center;
		text-align: left;
		justify-content: space-between;
		// height: 284px;
		width: 710px;
		margin: 0 auto;
		// .total-item {
		// 	background: rgba(255, 110, 121, 1);
		// 	width: 200px;
		// 	height: 234px;
		// 	border-radius: 20px;
		// 	padding-top: 10px;
		// 	&:nth-child(1) {
		// 		margin-left: 30px;
		// 	}
		// 	&:nth-child(3) {
		// 		margin-right: 30px;
		// 	}
		.total-item-bg {
			width: 224px;
			height: 234px;
			background: rgba(255, 255, 255, 1);
			border-radius: 20px;
			padding: 0 14px;
			// margin-left: -12px;
			padding-top: 26px;
			padding-bottom: 30px;
			display: flex;
			text-align: center;
			flex-direction: column;
			justify-content: space-between;
			box-shadow: 0px 4px 16px rgba(247, 1, 20, 0.1);
			.order-all {
				font-size: 28px;
				font-weight: 400;
				color: #666666;
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				text-align: center;
			}
			.order-money {
				font-size: 0px;
				color: #f70114;
				.icon {
					font-size: 24px;
				}
				.num {
					font-size: 36px;
				}
			}
			.order-count {
				// background: rgba(253, 241, 239, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				height: 46px;
				padding-left: 14px;
				color: rgba(102, 102, 102, 1);
				font-size: 24px;
				i {
					// color: #f70515;
					margin-right: 5px;
				}
			}
		}
		// }
	}
}
</style>
